<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page  import="jp.co.jbuy.product.*" import= "java.util.*" %>
<jsp:useBean id="el" class="java.util.ArrayList" scope="request" />
<jsp:useBean id="pd" class="jp.co.jbuy.product.ProductDetail" scope="request" />
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" type="text/css" href="http://i.yimg.jp/images/auct/template/ui/auc_mod/css/00/page/1.0.1/auct_pdtdtl.css">
<link rel="stylesheet" type="text/css" href="http://i.yimg.jp/images/auct/template/ui/auc_mod/css/00/comm/auct_common.css?1_3">
<script type="text/javascript" src="./res/js/pdtdtl.js"></script>
<%@ include file="/jsp/dtd.jsp" %>
<html>
<head>
<%@ include file="/jsp/commonHead.jsp" %>
<title>オークションデモサイト - オークション商品詳細</title>
</head>
<body>
<%@ include file="/jsp/topMenuBar.jsp" %>
<div id="container">
<div id="head">
  オークションデモサイト - オークション商品詳細
  <br>
  <br>
  <form action="${reqURI}" method="GET">
    オークションID:<input type="text" name="auction_id" value="${auctionID}"/>
    <input type="hidden" name="action" value="product_detail"/>
    <input type="hidden" name="data_source" value="2"/>
    <input type="submit" value="表示" />（例：w91946896）
  </form>
  <br>
</div><!-- head -->

<table border="0" cellspacing="0" cellpadding="0">
  <c:forEach var="item" items="${errorList}" varStatus="status">
    <tr>
      <td valign="top" height="400">
        <div class="errMsg" style="color:red">
          ${item}
        </div>
      </td>
    </tr>
  </c:forEach>
</table>

<c:if test="${!empty pd.auctionID}">
<!-- TITLEBAR -->
<div id="modTitBar">
<div class="decBg01">
<div class="decBg02">
<div class="decBg03">
<div class="decBg04">
  <table border="0" cellspacing="0" cellpadding="0"><tr><td>
    <div class="hslice" id="n122964147">
      <h1 property="auction:Title">${pd.title}</h1>
      <div class="entry-title" style="display:none;">${pd.title}</div>
      <div class="entry-content" style="display:none;">
        <a rel="feedurl" href="http://info.auctions.yahoo.co.jp/f/webslice/webslicerss.php?auctionID=n122964147"></a>
      </div>
    </div>
    </td><td>
      <c:if test="${!empty pd.option.featuredIcon}">
        <img border="0" height="16" width="16" hspace="0" align="absmiddle" alt="注目" title="注目" src="${pd.option.featuredIcon}">
      </c:if>
      <c:if test="${!empty pd.option.newItemIcon}">
        <img border="0" height="16" width="58" hspace="0" align="absmiddle" alt="新品" title="新品" src="${pd.option.newItemIcon}">
      </c:if>
      <c:if test="${!empty pd.option.buynowIcon}">
        <img border="0" height="16" width="16" hspace="0" align="absmiddle" alt="即決価格" title="即決価格" src="${pd.option.buynowIcon}">
      </c:if>
      <c:if test="${!empty pd.option.easyPaymentIcon}">
        <img border="0" height="16" width="16" hspace="0" align="absmiddle" alt="Yahoo!かんたん決済" title="Yahoo!かんたん決済" src="${pd.option.easyPaymentIcon}">
      </c:if>

    </td></tr>
  </table>
</div>
</div>
</div>
</div>

</div> 
<!-- TITLEBAR -->


<!--
CATEGORYPATH
-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td align="left" valign="top">
    <div id="modCtgPath" property="auction:CategoryPath">
      ${pd.categoryPath}
    </div>
  </td>
</tr>
</table>
<!--
/CATEGORYPATH
-->

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top">
<div id="modPdtInfo">
<!--
ITEMSUMMARY
-->
<div class="untHead">
<div class="decBg01">
<div class="decBg02">
<div class="decBg03">
<div class="decBg04">
<div class="decBg05">
  <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
    <td><h2>商品の情報</h2></td>
    <td width="1%" align="right" valign="middle">
      <p class="modWatchList" title="ウォッチリストに追加"><a href="javascript:void(0)"><span class="decTx01">ウォッチリストに追加</span></a></p>
    </td>
  </tr></table>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="untBody">
  <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
    <td width="1%" align="left" valign="top">
      <div class="pts01">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr><td align="center" valign="middle">
            <a href="#enlargeimg"><img src="${pd.image1.url}" alt="${pd.image1.alt}" height="150" border="0"></a>
          </td></tr>
        </table>
        <div class="decBg01">
          <p><a href="#enlargeimg"><img src="${pd.image2.url}" alt="大きな画像を見る" width="16" height="16" border="0"></a><a href="#enlargeimg" rel="auction:EnlargeImageLink" property="auction:EnlargeImageLinkText">大きな画像を見る</a> <span>（全3枚）</span></p>
          <p><a href="#desc"><img src="${pd.image3.url}" alt="商品説明を読む" width="16" height="16" border="0"></a><a href="#desc" rel="auction:DescriptionLink" property="auction:DescriptionLinkText">商品説明を読む</a></p>
        </div>
      </div>
    </td>

    <td valign="top">
      <div class="pts03">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>現在の価格<br><img src="http://i.yimg.jp/images/space.gif" width="150" height="1" alt=""></th>
          <td class="decClnTxt">：&nbsp;</td>
          <td ><p property="auction:Price">${pd.price} 円</p>

            <noscript>
              <p class="decBtn01" title="入札はこちら"><a href="#bidbox"><span class="decTx01">入札はこちら</span></a></p>
              <div class="decBtnArea"> 
                <div class="clr"></div>
              </div>
            </noscript>
            <script language=javascript>
            <!--
              document.write("<p class=\"decBtn01\" title=\"入札はこちら\" id=\"box1\" style=\"cursor:pointer;\"><a href=\"javascript:void(0);\"><span class=\"decTx01\">入札はこちら</span></a></p>");
              document.write("<div class=\"decBtnArea\">");
              document.write("<div class=\"clr\"></div></div>");
            //-->
            </script>

          </td>
        </tr>
 
        <tr>
          <th>即決価格<br><img src="http://i.yimg.jp/images/space.gif" width="150" height="1" alt=""></th>
          <td class="decClnTxt">：&nbsp;</td>
          <td ><p property="auction:BidOrBuyPrice">${pd.bidorBuy} 円</p>
            <noscript>
              <div class="decBtnArea"> 
                <p class="decBtn0202" title="いますぐ落札"><a href="#bidbox"><span class="decTx01">いますぐ落札</span></a></p>
                <div class="clr"></div>
              </div>
            </noscript>
            <script language=javascript>
            <!--
              document.write("<div class=\"decBtnArea\">");
              document.write("<p class=\"decBtn0202\" title=\"いますぐ落札\" id=\"box2\" style=\"cursor:pointer;\"><a href=\"javascript:void(0);\"><span class=\"decTx01\">いますぐ落札</span></a></p>");
              document.write("<div class=\"clr\"></div></div>");
            //-->
            </script>
          </td>
        </tr>

        <tr>
          <th >残り時間</th>
          <td>：&nbsp;</td>
          <td><b>${pdv.remainTime}</b> <span>（<a target="errjs" href="http://pageinfo18.auctions.yahoo.co.jp/jp/show/countdown?aID=${pd.auctionID}" onclick="javascript:var junk=window.open('http://pageinfo18.auctions.yahoo.co.jp/jp/show/countdown?aID=${pd.auctionID}', 'countdownw91946896','width=420,height=230,scrollbars=yes,resizable=yes,status=0');return false;">詳細な残り時間</a>）</span></td>
        </tr>

        <tr>
          <th class="decBg01">入札件数</th>
          <td class="decBg01">：&nbsp;</td>
          <td class="decBg01"><b property="auction:Bids">${pd.bids}</b> <span>（<a href="http://pageinfo18.auctions.yahoo.co.jp/jp/show/bid_hist?aID=${pd.auctionID}">入札履歴</a>）</span></td>
        </tr>
        </table>
      </div>
      
    </td>
    </tr>
  </table>

  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1%" align="left" valign="top">
      <div class="pts02">
        <p class="decBg06">便利機能</p>
      </div>
    </td>

    <td valign="top">
      <div class="pts04">
        <p class="decBg06">詳細情報</p>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>個数<br><img src="http://i.yimg.jp/images/space.gif" width="150" height="1" alt=""></th>
          <td class="decClnTxt">：&nbsp;</td>
          <td property="auction:Quantity" content="1">${pd.quantity}</td>
        </tr>

        <tr>
          <th >開始時の価格</th>
          <td>：&nbsp;</td>
        <td property="auction:StartPrice">${pd.initprice} 円</td>
        </tr>

        <tr>
          <th >最高額入札者</th>
          <td>：&nbsp;</td>
          <td>${pdv.highestBidder1.ID}<br></td>
        </tr>

        <tr>
          <th >開始日時</th>
          <td>：&nbsp;</td>
          <td property="auction:StartTime">${pdv.strStartTime}</td>
        </tr>

        <tr>
          <th >終了日時</th>
          <td>：&nbsp;</td>
          <td property="auction:EndTime">${pdv.strEndTime}<br><span class="ptsCalIc01"><a href="javascrip:void(0)" target="_blank"><img src="http://i.yimg.jp/i/jp/cal/addcal.gif" alt="カレンダーに追加" width="17" height="15" border="0"></a></span>&nbsp<span><a href="javascript:void(0)" target="_blank">カレンダーに追加</a></span></td>
        </tr>

        <tr>
          <th >早期終了</th>
          <td>：&nbsp;</td>
          <td>${pd.earlyClosing}</td>
        </tr>

        <tr>
          <th >自動延長</th>
          <td>：&nbsp;</td>
          <td>${pd.automaticExtension}</td>
        </tr>

        <tr>
          <th >オークションID</th>
          <td>：&nbsp;</td>
          <td property="auction:AuctionID">${pd.auctionID}</td>
        </tr>

        <tr>
          <th >商品の状態</th>
          <td>：&nbsp;</td>
        <td property="auction:ItemStatus" content="新品">${pd.itemStatusCondition}</td>
        </tr>

        <tr>
          <th >返品の可否</th>
          <td>：&nbsp;</td>
          <td property="auction:ReturnPolicy" content="返品不可">${pd.itemReturnableAllowed}</td>
        </tr>
        </table>

        <span style="display:none" property="auction:StartTimeUT">${pd.startTime}</span>
        <span style="display:none" property="auction:EndTimeUT">${pd.endTime}</span>
      </div>
    </td>

  </tr>
  </table>
  	  
</div><!-- untBody -->
<!--
/ITEMSUMMARY
-->

</div> <!-- modPdtInfo -->
</td>

<td width="1%" align="right" valign="top">
<div id="modSellInfo">
<!--
SELLERSUMMARY
-->
<div class="untHead">
<div class="decBg01">
<div class="decBg02">
<div class="decBg03">
<div class="decBg04">
<div class="decBg05">
<h3>出品者の情報</h3>
</div>
</div>
</div>
</div>
</div>
</div>


<div class="untBody decPwrBox">
  <div class="pts01">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th valign="top">出品者</th>
        <td>： <b property="auction:SellerID">${pd.seller.ID}</b> 
          <span>（<a href="${pd.seller.itemListURL}" rel="auction:AboutMeLink" property="auction:AboutMeLinkText">自己紹介</a>）</span>
        </td>
      </tr>
      <tr>
        <th valign="top">評価</th>
          <td>： <b property="auction:SellerRating">${pd.seller.ratingPoint}</b> 
          <span>
           （<a href="${pd.seller.ratingURL}" rel="auction:RatingLink" property="auction:RatingLinkText">評価の詳細</a>）
          </span>
        </td>
      </tr>
    </table>
  </div>
</div><!-- untBody -->
<!--
/SELLERSUMMARY
-->
</div> <!--  modSellInfo -->

</td>
</tr>
</table>


<!--
INFORMATION
-->
<div id="modPdtDtlInfo">


<!-- IMAGEINFO -->
<a name="enlargeimg"></a>
<div class="decNDoc01">

<div class="untHead">
<div class="decBg01">
<div class="decBg02">
<div class="decBg03">
<div class="decBg04">
<div class="decBg05">
<div class="decBg06">
<div class="decBg07">
  <h3>商品画像</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="untBody">
  <div class="pts01">
    <p>小さな画像をクリックすると、下に拡大表示されます。</p>
    <ul>
      <li title=""><a href="javascript:showImage(1);"><img id="img1" width="104" src="${pd.image1.url}" alt="${pd.image1.alt}" border="0" class="imgmin decBgOn"></a></li>
      <li title=""><a href="javascript:showImage(2);"><img id="img2" width="104" src="${pd.image2.url}" alt="${pd.image2.alt}" border="0" class="imgmin decBgOff"></a></li>
      <li title=""><a href="javascript:showImage(3);"><img id="img3" width="104" src="${pd.image3.url}" alt="${pd.image3.alt}" border="0" class="imgmin decBgOff"></a></li>
    </ul>
    <div class="clr"></div>
  </div>
  <div class="pts02">
    <table width="1%" border="0" cellspacing="0" cellpadding="0"><tr>
      <td valign="top">
        <img src="${pd.image1.url}" alt="${pd.image1.alt}" width="${pd.image1.width}" height="${pd.image1.height}" id="imgsrc1" rel="auction:ImagePath">
        <img src="${pd.image2.url}" alt="${pd.image2.alt}" width="${pd.image2.width}" height="${pd.image2.height}" id="imgsrc2" style="visibility:hidden;display:none;" rel="auction:ImagePath">
        <img src="${pd.image3.url}" alt="${pd.image3.alt}" width="${pd.image3.width}" height="${pd.image3.height}" id="imgsrc3" style="visibility:hidden;display:none;" rel="auction:ImagePath">
      </td>
    </tr><tr>
      <td><p class="decTx02">
        <span id="imgcmt1"></span>
      </p></td>
    </tr>
    </table>
  </div>
</div>

<div class="untFoot">
  <p class="decTx01"><a href="#">${pd.title}のページトップに戻る</a></p>
  <div class="clr"></div>
</div>

</div> <!-- decNDoc01 -->

<!-- /IMAGEINFO -->

<!--
ITEMINFO
-->
<a name="desc"></a>
<div class="untHead">
<div class="decBg01">
<div class="decBg02">
<div class="decBg03">
<div class="decBg04">
<div class="decBg05">
<div class="decBg06">
<div class="decBg07">
  <h3>商品説明 
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="modUsrPrv">

  <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
    <p>
      ${pd.description}
    </p>
  </td></tr></table>
</div>

<div class="untFoot">
  <div class="decBg01">
    <p class="decTx02"><a href="http://pageinfo18.auctions.yahoo.co.jp/jp/show/qanda?aID=${pd.auctionID}" rel="auction:QandALink" property="auction:QandALinkText">出品者への質問</a><span></span></p>
    <div class="clr"></div>
  </div>
  <p class="decTx01"><a href="#">${pd.title}のページトップに戻る</a></p>
  <div class="clr"></div>
</div>
<!--
/ITEMINFO
-->
</div>
<!--
/INFORMATION
-->
</c:if>

<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about">
<img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" alt="Webサービス by Yahoo! JAPAN" border="0" style="margin:15px 15px 15px 15px" /></a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->

<%@ include file="/jsp/footer.jsp" %>
</div>
</body>
</html>